<template>
	<section>
		<div class="head-wrap">
			<user-info></user-info>
			<div class="work-num">
				<ul>
					<li>
						<p class="keynote">{{workInfo?.zan_num || 0}}</p>
						<span>点赞数</span>
					</li>

					<li>
						<p class="keynote">{{workInfo?.collect_num || 0}}</p>
						<span>收藏数</span>
					</li>

					<li>
						<p class="keynote">{{workInfo?.download_num || 0}}</p>
						<span>下载数</span>
					</li>
					<li>
						<p class="keynote">{{workInfo?.score || 0}}</p>
						<span>云算力</span>
					</li>
				</ul>

				<div class="btn-wraps">
					<div @click="toRecords">明细</div>
					<div @click="recharge" class="charge">充值</div>
				</div>
			</div>
			<!-- <personal-bar></personal-bar> -->
		</div>

		<!-- <div class="title-wrap">
			<span class="title">我的作品</span>
			<div @click="toCreate">
				去创作
			</div>
		</div> -->
		<!-- <div class="info">
			<div class="sub work">
				<img src="@/assets/img/create.png">
				<div>
					<p>{{workInfo?.total || 0}}</p>
					<span>创作数</span>
				</div>
			</div>
			
			<div class="sub boutique">
				<img src="@/assets/img/class.png">
				<div>
					<p>{{workInfo?.school_total || 0}}</p>
					<span>校级优秀</span>
				</div>
			</div>
			
			<div class="sub group">
				<img src="@/assets/img/school.png">
				<div>
					<p>{{workInfo?.class_total || 0}}</p>
					<span>班级优秀</span>
				</div>
			</div>
		</div> -->
		<div class="tabs">
			<span :class="isActive == 1 ? 'current' : ''" @click="publish">发布</span>
			<span :class="isActive == 2 ? 'current' : ''" @click="collect">收藏</span>
			<span :class="isActive == 3 ? 'current' : ''" @click="like">点赞</span>
		</div>

		<div class="tabs-sub">
			<span :class="isSelect == 1 ? 'active' : ''" @click="selectModelType(1)">文本模型</span>
			<span :class="isSelect == 3 ? 'active' : ''" @click="selectModelType(3)">图片模型</span>
		</div>

		<ul class="model-wrap">
			<li v-for="(item, index) in dataList" :key="item.id" class="model-list" @click="toDetail(item)">
				<div class="content" @mouseover="showDelete(item)" @mouseleave="hideDelete(item)">
					<img :src='staticURL+item.thumbnail_url' v-if='item.thumbnail_url' class='bg_logo' />
					<img src="@/assets/img/defaultBg.png" class='bg_logo' v-else />

					<!-- <div class="content-bottom">
						<span class='submit' v-if='item.status == 1'>耐心等待老师点评...</span>
						<span class='look' v-if='item.status == 2' @click.stop="lookComment(item)">查看点评</span>
					</div> -->

					<div class="content-middle" :class="item.type == 1 ? 'model-bg' : ''">
						<!-- <div class="status">
							<span class="unsubmit" v-if='item.status == 1'>待点评</span>
							<span class="commented" v-if='item.status == 2'>已点评</span>
						</div> -->
						<div class="level-wrap">
							<p class="name">{{item.name}}</p>
							<div v-text='item.level > 1 ? "高清" : "普通"' class="level"></div>
						</div>

						<div class="high" @click.stop="handleHigh(item)"
							v-if='item.level == 1 && item.type != 3 && isActive ==1'>生成高清</div>
					</div>
					<!-- <div class="delete-wrap" v-if='item.isShowDelate'>
						<i class="el-icon-delete" @click.stop="submitDelete(item)"></i>
					</div> -->
				</div>
			</li>
		</ul>
		<recharge-dialog v-if="isRecharge" @close="close"></recharge-dialog>
		<common-pagination v-if='total > 10' :total="total" :size="searchData.size" @size-change="handelPagesizeChange"
			@page-change="handlePageChange"></common-pagination>
		<look-comment-dialog v-if="isLookComment" :model_id="model_id" @close="close"></look-comment-dialog>
		<model-render v-if="isShowModel" :model_id="model_id" @close="close"></model-render>
		<img-render v-if="isShowImg" :model_id="model_id" @close="isShowImg = false"></img-render>
		<img-model-render v-if="isShowImgModel" :model_id="model_id" @close="isShowImgModel = false"></img-model-render>
	</section>
</template>

<script>
	import utils from '@/assets/js/utils';
	import PersonalBar from '@/components/PersonalBar';
	import RechargeDialog from '@/components/RechargeDialog';
	// import ModelRender from '@/views/model/components/modelRender';
	import ModelRender from '@/views/model/components/modelRender';
	import ImgRender from '@/views/model/components/imgRender';
	import imgModelRender from '@/views/model/components/imgModelRender';
	import CommonPagination from '@/components/CommonPagination';
	import LookCommentDialog from './lookCommentDialog';
	import UserInfo from './userInfo';
	import {
		workList,
		getCollect,
		getLike
	} from '@/api/personal.js';
	import {
		getModelDetail,
		modelDelete,
		createHdModel
	} from '@/api/model.js';
	export default {
		components: {
			CommonPagination,
			LookCommentDialog,
			ModelRender,
			ImgRender,
			imgModelRender,
			UserInfo,
			RechargeDialog,
			PersonalBar
		},
		data() {
			return {
				isActive: 1,
				isSelect: 1,
				modelList: [],
				dataList: [],
				workInfo: {},
				isRecharge: false,
				model_id: "",
				isLookComment: false,
				isShowModel: false,
				isShowImg: false,
				isShowImgModel: false,
				total: 0,
				searchData: {
					page: 1,
					size: 10
				},
				realname: "",
				headimg: "",
				createTime: ""
			};
		},

		created() {
			this.realname = utils.getSession('realname');
			this.headimg = utils.getSession('headimg');
			this.createTime = utils.getSession('createTime');
			this.getWorkList();
		},

		methods: {
			toRecords() {
				this.$router.push({
					path: "./computing-detail"
				})
			},

			recharge() {
				this.isRecharge = true;
			},

			handleHigh(item) {
				this.$confirm('生成高清模型将消耗20个云算力，确认生成吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.handleCreated(item)
				}).catch(() => {});
			},
			
			async handleCreated(item){
				const obj = {
					model_id: item.id
				};
				const {
					data,
					status
				} = await createHdModel(obj);
				if (status !== 200) return;
				if (data.code == 200) {
					this.$message.success("生成高清模型成功");
					this.getWorkList();
				} else {
					this.$message.warning(data && data.message || '获取失败');
				}
			},

			async getWorkList() {
				const {
					data,
					status
				} = await workList(this.searchData);
				if (status !== 200) return;
				if (data.code == 200) {
					this.workInfo = data?.data || {};
					this.modelList = data?.data?.list || [];
					this.total = data?.data?.total || 0
					this.filterData()
				} else {
					this.modelList = [];
					this.total = 0
					this.$message.warning(data && data.message || '获取失败');
				}
			},

			async getCollect() {
				const {
					data,
					status
				} = await getCollect(this.searchData);
				if (status !== 200) return;
				if (data.code == 200) {
					this.modelList = data?.data?.list || [];
					this.total = data?.data?.total || 0
					this.filterData()
				} else {
					this.modelList = [];
					this.total = 0
					this.$message.warning(data && data.message || '获取失败');
				}
			},

			async getLike() {
				const {
					data,
					status
				} = await getLike(this.searchData);
				if (status !== 200) return;
				if (data.code == 200) {
					this.modelList = data?.data?.list || [];
					this.total = data?.data?.total || 0
					this.filterData()
				} else {
					this.modelList = [];
					this.total = 0
					this.$message.warning(data && data.message || '获取失败');
				}
			},

			handelPagesizeChange(size) {
				this.searchData.size = size;
				this.getWorkList();
			},

			handlePageChange(page) {
				this.searchData.page = page;
				this.getWorkList();
			},

			toCreate() {
				this.$router.push({
					path: "./create-model"
				})
			},

			close() {
				this.isShowModel = false;
				this.isLookComment = false;
				this.isRecharge = false;
			},

			toDetail(item) {
				this.model_id = item.id;
				if (this.isSelect == 1) {
					this.isShowModel = true;
				} else if (this.isSelect == 3) { //图片模型
					this.isShowImgModel = true;
				}
			},
			publish() {
				this.modelList = [];
				this.isActive = 1;
				this.searchData.page = 1;
				this.getWorkList()
			},
			collect() {
				this.modelList = [];
				this.isActive = 2;
				this.searchData.page = 1;
				this.getCollect()
			},

			like() {
				this.modelList = [];
				this.isActive = 3;
				this.searchData.page = 1;
				this.getLike()
			},

			selectModelType(type) {
				this.isSelect = type;
				this.filterData();
			},
			filterData() {
				if (this.isSelect == 1) { //文本模型
					this.dataList = this.modelList.filter(ele => ele.type == 1)
				} else if (this.isSelect == 3) { //图片模型
					this.dataList = this.modelList.filter(ele => ele.type == 3)
				}
			},
			//查看点评
			lookComment(item) {
				this.model_id = item.id;
				this.isLookComment = true;
			},

			showDelete(item) {
				if (item.level == 1) {
					this.$set(item, "isShowDelate", true)
				}
			},

			hideDelete(item) {
				this.$set(item, "isShowDelate", false)
			},

			async submitDelete(item) {
				const obj = {
					model_id: item.id,
				};
				const {
					data,
					status
				} = await modelDelete(obj);
				if (status !== 200) return;
				if (data.code == 200) {
					this.getWorkList();
					this.$message.success("删除成功");
				} else {
					this.$message.warning("删除失败");
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.head-wrap {
		@include flex-row;
		margin-bottom: 20px;

		.work-num {
			@include flex-row;

			ul {
				margin-left: 20px;
				border-left: 1px solid #CFDDE1;
				@include flex-row;

				li {
					margin-left: 26px;
					text-align: center;

					p {
						margin-bottom: 10px;
						font-size: 18px;
						color: #333333;
						font-weight: bold;
					}

					span {
						font-size: 14px;
						color: #999999;
					}
				}
			}

			.btn-wraps {
				@include flex-row;
				margin-left: 100px;

				div {
					@include cursor-style;
					margin-right: 20px;
					padding: 10px 30px;
					background: #FFC267;
					border-radius: 5px 5px 5px 5px;
				}

				.charge {
					background: #FF8A00;
				}
			}
		}
	}

	.title-wrap {
		@include flex-row;
		justify-content: space-between;
		margin-bottom: 16px;

		.title {
			font-weight: bold;
			font-size: 18px;
			color: #000000;
		}

		div {
			@include cursor-style;
			padding: 6px 8px 6px 28px;
			background: url("../../../assets/img/score.png") no-repeat 10px center;
			background-size: 16px;
			border-radius: 5px 5px 5px 5px;
			border: 2px solid #FF8A00;
			font-weight: 500;
			font-size: 14px;
			color: #FF8A00;
		}
	}

	.info {
		@include flex-row;
		justify-content: space-between;
		margin-bottom: 15px;

		.sub {
			width: 33%;
			height: 100px;
			@include flex-row;
			justify-content: center;
			border-radius: 10px 10px 10px 10px;

			img {
				display: block;
				width: 62px;
				height: 62px;
				margin-right: 40px;
			}

			div {
				@include flex-row;
				flex-direction: column;
				justify-content: space-between;

				span {
					font-size: 14px;
					color: #6C7B8A;
				}

				p {
					font-weight: bold;
					font-size: 30px;
				}
			}
		}

		.work {
			background: #E0F0FF;

			p {
				color: #0AB7FF;
			}

		}

		.boutique {
			background: #FFEEEE;

			p {
				color: #FF4747;
			}
		}

		.group {
			background: #F9EEFF;

			p {
				color: #B252FF;
			}
		}

		.total {
			background: #EEFFF9;

			p {
				color: #42D58F;
			}
		}
	}

	.model-wrap {
		display: flex;
		flex-wrap: wrap;

		.model-list {
			width: 20%;
			margin-bottom: 30px;

			.content {
				position: relative;
				width: 90%;
				height: 100%;

				.bg_logo {
					display: block;
					width: 100%;
					height: 322px;
					border-radius: 10px 10px 0px 0px;
				}

				.content-middle {
					z-index: 9;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					width: 100%;
					height: 322px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
					padding: 20px;
					box-sizing: border-box;
					border-radius: 10px 10px 0px 0px;
					cursor: pointer;
					color: #fff;

					.status {
						@include flex-row;
						justify-content: flex-end;

						span {
							padding: 5px 10px;
							background: #FF8A00;
							border-radius: 5px 5px 5px 5px;
							font-size: 12px;
							color: #FFFFFF;
						}

						.unsubmit {
							background-color: #FF8A00;
						}

						.comment {
							background-color: #36DA9F;
						}

						.commented {
							background-color: #999999;
						}
					}

					.level-wrap {
						width: 100%;
						@include flex-row;
						align-items: flex-start;
						justify-content: space-between;

						.name {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							font-weight: 400;
							font-size: 14px;
							color: #FFFFFF;
							flex: 1;
						}

						.level {
							background: #FF8A00;
							border-radius: 5px;
							color: #FFFFFF;
							padding: 5px 10px;
							font-size: 12px;
							font-weight: bold;
						}
					}

					.high {
						width: 50%;
						height: 36px;
						line-height: 36px;
						text-align: center;
						background: #FFC267;
						border-radius: 5px 5px 5px 5px;
						font-size: 12px;
						color: #FFFFFF;
						@include cursor-style;
					}

				}

				.model-bg {
					background: rgba(0, 0, 0, 0.6);
				}

				.content-bottom {
					height: 46px;
					line-height: 46px;
					text-align: center;

					span {
						border-radius: 0px 0px 10px 10px;
						display: block;
						font-size: 16px;
						color: #FFFFFF;

					}

					.submit {
						background: #FF8A00;
					}

					.edit {
						background: #FFC267;
					}

					.look {
						background: #FFC267;
						@include cursor-style;
					}
				}

				.delete-wrap {
					z-index: 10;
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					right: 0;
					top: 0;
					background: rgba(0, 0, 0, 0.1);
					display: flex;
					align-items: center;
					justify-content: center;

					i {
						font-size: 36px;
						cursor: pointer;
						color: #fff
					}
				}
			}
		}
	}

	.tabs {
		display: flex;
		align-items: center;
		padding-bottom: 10px;
		border-bottom: 1px solid #FFF1DF;
		font-size: 14px;
		color: #666;

		span {
			padding: 4px 16px;
			border-radius: 20px;
			cursor: pointer;
			margin-right: 30px;
		}

		.current {
			background-color: #FF8A00;
			color: #fff;
		}
	}

	.tabs-sub {
		width: 220px;
		background-color: rgb(241 242 248/1);
		@include flex-row;
		justify-content: space-between;
		padding: 4px 10px;
		border-radius: 20px;
		margin: 20px 0;
		font-size: 14px;
		color: #333;

		span {
			padding: 4px 20px;
			border-radius: 20px;
			cursor: pointer;
		}

		.active {
			background-color: #FF8A00;
			color: #fff;
		}
	}
</style>